<!DOCTYPE html>
<html>
<head>
    <title>编辑文章</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 预设模板定义，现在是简单的JSON字符串
            var templates = {
                none: JSON.stringify({
                }, null, 4), 
                h1: JSON.stringify({
                    "type": "h1",
                    "content": ""
                }, null, 4), 
                h2: JSON.stringify({
                    "type": "h2",
                    "content": ""
                }, null, 4),
                p: JSON.stringify({
                    "type": "p",
                    "content": ""
                }, null, 4),
                img: JSON.stringify({
                    "type": "img",
                    "content": ""
                }, null, 4),
                mission_basic_info: JSON.stringify({
                    "type": "mission_basic_info",
                    "country": "",
                    "institution":"",
                    "rocket_name":"",
                    "payload_info":"",
                    "launch_site":"",
                    "mini_tags":[
                        {"title":"发射工位","content":""},
                        {"title":"目标轨道","content":""},
                        {"title":"任务性质","content":""},
                        {"title":"发射窗口","content":""},
                    ]
                }, null, 4)
            };

            function addNewItem(template) {
                var formIdx = $('#id_form-TOTAL_FORMS').val();
                var newForm = $('#empty_form').html().replace(/__prefix__/g, formIdx);
                $('#form_set').append(newForm);
                $('#id_form-TOTAL_FORMS').val(parseInt(formIdx) + 1);

                if (template) { // 如果提供了模板，则填充到新添加的内容块中
                    var textarea = $('#form_set .json-item:last-child').find('textarea[name$=json_data]');
                    if (textarea.length) {
                        textarea.val(template); // 直接填充模板字符串
                    }
                }
            }

            $('#add_item').click(function() { 
                addNewItem(); // 添加空白内容块
            });

            function loadPresetTemplate(templateName) {
                var template = templates[templateName];
                if (template) {
                    addNewItem(template); // 使用模板数据添加新项
                } else {
                    console.error("未找到指定的模板：" + templateName);
                }
            }

            // 绑定加载模板按钮点击事件
            $('#load_template_button').click(function() {
                var selectedTemplate = document.getElementById('templateSelector').value;
                loadPresetTemplate(selectedTemplate);
            });

            // 动态绑定删除按钮点击事件
            $(document).on('click', '.remove_item', function() {
                $(this).closest('.json-item').remove();
            });
        });
    </script>
</head>
<body>
    <h1>编辑文章</h1>
    <form method="post">
        {% csrf_token %}
        {{ article_form.as_p }}
        {{ formset.management_form }}
        <div id="form_set">
            {% for form in formset %}
                <div class="json-item">
                    {{ form.as_p }}
                    <button type="button" class="remove_item">删除</button>
                </div>
            {% endfor %}
        </div>
        
        <button type="submit">保存</button>
        <button type="button" id="add_item">添加内容块</button>

        <!-- 预设模板选择 -->
        <button type="button" id="load_template_button">加载选中的模板</button>
        <select id="templateSelector">
            <option value="">空模板</option>
            <option value="h1">一级标题</option>
            <option value="h2">二级标题</option>
            <option value="p">正文</option>
            <option value="mission_basic_info">任务基本信息卡片</option>
        </select>
        
    </form>

    <!-- 预留空表单用于动态添加 -->
    <div id="empty_form" style="display:none;">
        <div class="json-item">
            {{ formset.empty_form.as_p }}
            <button type="button" class="remove_item">删除</button>
        </div>
    </div>
</body>
</html>